<template>
	<section class="section-two" @click="navigateToNext">
		<span class="corner-number">2</span> <!-- 添加数字 "1" 的标签 -->
		<h2>明确目标</h2>
		<p>这是SMART，您可以在这里放置关于SMART的信息。</p>
	</section>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'; // 引入 vue-router 的 useRouter

	const router = useRouter(); // 获取路由实例

	const navigateToNext = () => {
		router.push({
			name: 'theGoal'
		});
	};
</script>

<style scoped>
	.section-two {
		background: linear-gradient(135deg, #ff7e5f, #feb47b);
		/* 温暖渐变 */
		color: white;
		padding: 20px;
		border-radius: 8px;
		text-align: center;
		position: relative;
		/* 使内部绝对定位的元素相对该部分定位 */
	}

	.corner-number {
		position: absolute;
		/* 绝对定位 */
		top: 10px;
		/* 距离顶部的距离 */
		left: 10px;
		/* 距离左边的距离 */
		color: dodgerblue;
		/* 设置颜色为粉色 */
		font-family: 'Songti SC', '宋体', serif;
		/* 设置字体为宋体 */
		font-size: 24px;
		/* 可以根据需要调整字体大小 */
	}
</style>